<template>
  <scroll class="comments-scroll"
          :probe-type="0"
          :click="false"
          :data="data"
          pull-up
          :is-open-pull-up="more"
          @pullUp="pullUp"
          @init="$emit('init')"
          ref="scroll"
  >
    <ul class="top-comments" v-if="topComments.length">
      <li class="title-bar">
        <span class="title">顶置</span>
        <span class="ABC">TOP</span>
      </li>
      <item v-for="item in topComments" :key="item.commentId" :data="item" />
    </ul>
    <ul class="hot-comments" v-if="hotComments.length">
      <li class="title-bar">
        <span class="title">热门</span>
        <span class="ABC">HOT</span>
      </li>
      <item v-for="item in hotComments" :key="item.commentId" :data="item" />
    </ul>
    <ul class="comments" v-if="comments.length">
      <li class="title-bar">
        <span class="title">全部</span>
        <span class="ABC">ALL</span>
      </li>
      <item v-for="item in comments" :key="item.commentId" :data="item" />
    </ul>
    <div class="no-comment" v-show="!more">没有评论了~</div>
  </scroll>
</template>

<script>
import item from './item'

export default {
  name: 'comments',
  props: {
    topComments: {
      type: Array,
      default () {
        return []
      }
    },
    hotComments: {
      type: Array,
      default () {
        return []
      }
    },
    comments: {
      type: Array,
      default () {
        return []
      }
    },
    more: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    pullUp () {
      this.$emit('pullUp')
    },
    finish () {
      this.$refs.scroll && this.$refs.scroll.finishPullUp()
    }
  },
  computed: {
    data () {
      return this.topComments.concat(this.hotComments, this.comments)
    }
  },
  components: { item }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .comments-scroll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    .top-comments, .hot-comments, .comments  {
      .title-bar {
        position: relative;
        text-align: left;
        color: @color-theme;
        font-size: @font-size-large-x;
        text-indent: 20px;
        letter-spacing: 2px;
        line-height: 54px;
        .title {
          font-weight: 700;
          z-index: 2;
        }
        .ABC {
          position: absolute;
          top: 11px;
          left: 11px;
          opacity: .2;
          font-weight: 900;
          z-index: 1;
        }
      }
    }
    .no-comment {
      padding: 20px;
      text-align: center;
      color: @color-text-d;
    }

  }

</style>
